<!--
 * @Descripttion: 统计数值组件
 * @version: 1.1
 * @Author: sakuya
 * @Date: 2021年6月23日13:11:32
 * @LastEditors: sakuya
 * @LastEditTime: 2022年5月14日19:55:09
-->

<template>
	<div class="sc-statistic">
		<div class="sc-statistic-title">
			{{ title }}
			<el-tooltip v-if="tips" effect="light">
				<template #content>
					<div style="width: 200px; line-height: 2">
						{{ tips }}
					</div>
				</template>
				<el-icon class="sc-statistic-tips"><el-icon-question-filled /></el-icon>
			</el-tooltip>
		</div>
		<div class="sc-statistic-content">
			<span v-if="prefix" class="sc-statistic-content-prefix">{{ prefix }}</span>
			<span class="sc-statistic-content-value">{{ cmtValue }}</span>
			<span v-if="suffix" class="sc-statistic-content-suffix">{{ suffix }}</span>
		</div>
		<div v-if="description || $slots.default" class="sc-statistic-description">
			<slot>
				{{ description }}
			</slot>
		</div>
	</div>
</template>

<script>
export default {
	props: {
		title: { type: String, required: true, default: '' },
		value: { type: String, required: true, default: '' },
		prefix: { type: String, default: '' },
		suffix: { type: String, default: '' },
		description: { type: String, default: '' },
		tips: { type: String, default: '' },
		groupSeparator: { type: Boolean, default: false }
	},
	data() {
		return {}
	},
	computed: {
		cmtValue() {
			return this.groupSeparator ? this.$TOOL.groupSeparator(this.value) : this.value
		}
	}
}
</script>

<style scoped>
.sc-statistic-title {
	font-size: 12px;
	color: #999;
	margin-bottom: 10px;
	display: flex;
	align-items: center;
}
.sc-statistic-tips {
	margin-left: 5px;
}
.sc-statistic-content {
	font-size: 20px;
	color: #333;
}
.sc-statistic-content-value {
	font-weight: bold;
}
.sc-statistic-content-prefix {
	margin-right: 5px;
}
.sc-statistic-content-suffix {
	margin-left: 5px;
	font-size: 12px;
}
.sc-statistic-description {
	margin-top: 10px;
	color: #999;
}

.dark .sc-statistic-content {
	color: #d0d0d0;
}
</style>
